<template>
  <el-row>
    <!-- 用于将画面挤到中间 -->
    <el-col :span="3" style="height: 10px;"></el-col>
    <el-col :span="18">
      <div class="mainContent">
        <el-form :model="form" :rules="rules" ref="form" label-width="200px">
          <!-- 普通文本输入 -->
          <el-form-item label="ncomps" prop="ncomps">
            <el-input v-model.number="form.ncomps" style="width: 100%"></el-input>
          </el-form-item>
          <!-- 下拉选择输入 -->
          <el-form-item label="scaling-type">
            <el-select v-model="form.scaling_type" placeholder="请选择缩放的尺度" style="width: 100%">
              <el-option label="0" value="0"></el-option>
              <el-option label="0.5" value="0.5"></el-option>
              <el-option label="1" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="plot-title" prop="plot_title">
            <el-input v-model="form.plot_title" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="plot-component-x" prop="plot_component_x">
            <el-input v-model.number="form.plot_component_x"></el-input>
          </el-form-item>
          <el-form-item label="plot-component-y" prop="plot_component_y">
            <el-input v-model.number="form.plot_component_y"></el-input>
          </el-form-item>
          <!-- 单选输入 -->
          <el-form-item label="discrete">
            <el-switch v-model="form.discrete"></el-switch>
          </el-form-item>
          <!-- 根据vif选定渲染 -->
          <el-form-item v-if="form.discrete" label="discrete-label" prop="discrete_label">
            <el-input v-model.number="form.discrete_label"></el-input>
          </el-form-item>
          <el-form-item label="label-outliers">
            <el-switch v-model="form.label_outliers"></el-switch>
          </el-form-item>
          <!-- 目前使用后会打乱原有标签 -->
          <!-- <el-form-item label="outliers index" prop="outliers_index">
            <el-input v-model="form.outliers_index"></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit()" v-if="submitFlag">提交</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
        <!-- 展示返回图片 -->
        <div class="show-image">
          <div class="block" v-for="(image,num) in imageList" :key="num">
            <el-row :gutter="20">
              <el-col :span="9">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>Score Plot</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="downLoadImg(image.url)">下载图片
                    </el-button>
                  </div>
                  <div v-for="(item,key,index) in image" :key="index" class="text item">
                    <div v-if="key != 'url'">{{key + ':' + item}}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="15">
                <el-image :src="image.url" fit="scale-down"></el-image>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
   import passerby from "@/api/user";
  import pca from "@/api/pca";
  export default {
    data() {
      // 一些验证的规则，跟着改就行
      var checkNComps = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('个数不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value > this.FileShape1) {
              callback(new Error('必须小于最大维度'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var checkPlotComps = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('个数不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value > this.form.ncomps) {
              callback(new Error('必须小于降维的维度'));
            } else if (this.form.plot_component_x == this.form.plot_component_y) {
              callback(new Error('两个不能相同'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var checkLabel = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('个数不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value > this.FileShape3) {
              callback(new Error('没那么多类别'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      return {
        // 分析数据的维度
        FileShape1: 0,
        // 分析数据样本的个数
        FileShape2: 0,
        // 标签的类别个数
        FileShape3: 0,
        // 根据数据是否合理，能否进行提交
        submitFlag: false,
        // 表单的数据
        form: {
          ncomps: 2,
          scaling_type: 0,
          dpi: 500,
          plot_title: "",
          plot_component_x: 1,
          plot_component_y: 2,
          discrete: false,
          discrete_label: 1,
          label_outliers: false,
          outliers_index: "None",
        },
        // element表单的一些验证规则
        rules: {
          ncomps: [
            {
              required: true,
              type: "integer",
              message: "请输入一个整数",
              trigger: "blur",
            },
            { validator: checkNComps, trigger: 'blur' }
          ],
          plot_component_x: [
            {
              required: true,
              type: "integer",
              message: "请输入一个整数",
              trigger: "blur",
            },
            { validator: checkPlotComps, trigger: 'blur' }
          ],
          plot_component_y: [
            {
              required: true,
              type: "integer",
              message: "请输入一个整数",
              trigger: "blur",
            },
            { validator: checkPlotComps, trigger: 'blur' }
          ],
          plot_title: [
            {
              required: false,
              message: "请输入图片标题",
              trigger: "blur",
            },
            {
              min: 1,
              max: 20,
              message: "长度在 1 到 20 个字符",
              trigger: "blur",
            },
          ],
          outliers_index: [
            {
              required: true,
              message: "请输入离群点",
              trigger: "blur",
            },
            {
              pattern: /^(\d*,)*\d*$|^None$/,
              message: "格式不对",
              trigger: "blur",
            },
          ],
          discrete_label: [
            {
              required: true,
              type: "integer",
              message: "请输入一个整数",
              trigger: "blur",
            },
            { validator: checkLabel, trigger: 'blur' }
          ],
        },
        imageList: [],
      };
    },
    mounted() {
      // 在开始分析之前进行验证数据的合理性
      this.getState()
    },
    methods: {
      // 获取数据是否合理
      getState() {
        passerby.isPrepared()
        .then((res) => {
          this.FileShape1 = res.data.data.FileShape1;
          this.FileShape2 = res.data.data.FileShape2;
          this.FileShape3 = res.data.data.FileShape3;
          this.submitFlag = true;
        })
        .catch(() => {
          this.$router.replace("/metabo/differential_analysis/upload_file");
        });
      },
      // 提交表单
      onSubmit() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            //如果通过验证 to do...
            var tempForm = JSON.parse(JSON.stringify(this.form))
            pca.PCAScorePlot(this.form).then((response) => {
              tempForm.url = process.env.API_URLANDPORT + response.data.data.webImagePath
              this.imageList.push(tempForm);
            });
          } else {
            this.$message.error("表单出错啦")
            return false
          }
        })
      },
      // 获取图片
      downLoadImg(url) {
        window.open(url)
      },
    },
  };
</script>
<style>
  .mainContent {
    max-width: 1000px;
  }
</style>